
import React, { useState, useEffect, useRef } from 'react'
import { Modal, Form, Tabs, Input, Button, Checkbox, Select, Row, Col, message, Spin } from 'antd';
import { setStore, getStore } from '@/utils/commons'
import VerifyBox from '@/components/verifyBox'
import Funs from '@/utils/Funs'
import API from '@/api/api'
import './index.scss';
const { TabPane } = Tabs;
const { Option } = Select;

function UnBindPhone(props) {
    const [load, setLoad] = useState(false)
    const [timer, setTimer] = useState(0)
    const [form] = Form.useForm();
    const verifyRef = useRef();

    useEffect(() => {
        let interval;
        if (timer > 0) {
            interval = setInterval(() => {
                setTimer(timer - 1);
            }, 1000);
        }
        return () => clearInterval(interval);
    }, [timer]);


    const sendCaptcha = async (captcha, key) => {
        let opts = { action: 'unbind', type: 'phone', captcha: captcha, captchaKey: key };

        if (timer === 0) {
            setLoad(true)
            let sendCaptchaRes = await API.sendVerify(opts);
            if (sendCaptchaRes) {
                setTimer(60)
                setLoad(false)
                message.success("已成功发送验证码");
                cancelVerifyModal()
            } else {
                setLoad(false)
            }
        } else {
            message.warning("验证码发送间隔太短，请稍后再试")
        }
    }

    const cancelModal = () => {
        props.close()
    }

    const showVerify = async () => {
        openVerifyModal()
    }

    const cancelVerifyModal = () => {
        verifyRef.current.cancelModal()
    }

    const openVerifyModal = () => {
        verifyRef.current.openModal()
    }

    const onFinish = async (values) => {
        let opts = { password: values.password, captcha: values.captchaCode }
        let res = await API.unBindPhone(opts)
        setLoad(true)
        if (res) {
            setLoad(false)
            message.success('解绑手机成功')
            setTimeout(() => { window.location.reload() }, 500)
        } else {
            setLoad(false)
        }
    };

    const buttonAfter = (
        <a className="captcha-btn" onClick={showVerify}> {timer === 0 ? '发送验证码' : timer + '秒'}</a>
    )

    return (
        <Modal className="unbind-phone" visible={props.status} onCancel={cancelModal} footer={null}>
            {
                !load ? null :
                    <div className="load-mark">
                        <Spin />
                    </div>
            }

            <Form
                form={form}
                className="bind-form"
                onFinish={onFinish}
            >
                <Row justify="center">
                    <h2 className="bind-title">解绑手机</h2>
                </Row>
                <Form.Item name="captchaCode" rules={[
                    { required: true, message: '输入验证码' }
                ]}>
                    <Input className="bind-input" placeholder="再输入验证码" suffix={buttonAfter} bordered={false} />
                </Form.Item >
                <Form.Item name="password" rules={[
                    { required: true, message: '请输入登录密码', },
                ]}>
                    <Input.Password className="bind-input" type="password" placeholder="请输入登录密码" bordered={false} />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="bind-form-button">
                        绑定
                    </Button>
                </Form.Item>
            </Form>
            <VerifyBox ref={verifyRef} send={sendCaptcha} />
        </Modal>
    )
}

export default UnBindPhone